<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>proxy</title>
</head>
<body>
  <h1>使用Proxy 和 Reflect 实现双向数据绑定</h1>
  <input type="text" id="input">
  <h2>您输入的内容是： <i id="txt"></i></h2>
  <script>
    //获取dom元素
    let oInput = document.getElementById("input");
    let oTxt = document.getElementById("txt");
 
    //初始化代理对象
    let obj = {};
    //给obj增加代理对象
    let newProxy = new Proxy(obj, {
      get: (target, key, recevier) => {
        console.log('---get---',target, key, recevier);
        return Reflect.get(target, key, recevier);
      },
      set: (target, key, value, recevier) => {
        console.log('---set---',target, key, value, recevier);
        //监听newProxy是否有新的变化
        if (key == "text") {
          oTxt.innerHTML = value;
        }
        //将变化反射回原有对象
        return Reflect.set(target, key, value, recevier);
      }
    })
    //监听input输入事件
    oInput.addEventListener("keyup", (e) => {
      //修改代理对象的值
      newProxy.text = e.target.value;
    })
  </script>
</body>
</html>